<template>
	<view class="repair-wrap">
		<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;padding-bottom: 93px;">
			<view style="width: 88%;margin:auto;">
				<view class="header-li">
					<view style="width: 98px;">

						<view>
							<text style="color: red;">*</text>
							与户主关系
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.family_type" placeholder="请输入" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							住户姓名
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.hous_user_name" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							住户电话
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.hous_phone" placeholder="请输入电话" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							身份证号
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.id_card" placeholder="请输入身份证号" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							性别
						</view>
					</view>
					<picker :value="indexe" @change="typeBtn" :range="sexList" range-key="name" mode="selector">
						<view class="form-select">{{sexList[indexe].name}}</view>
					</picker>
				</view>

				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							出生日期
						</view>
					</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>

				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;">*</text>
							民族
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.hous_nation" placeholder="请输入民族" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>
							<text style="color: red;opacity: 0;">*</text>
							职业
						</view>
					</view>
					<view class="input1">
						<u-input v-model="addHouseholdCdo.career" placeholder="请输入职业" />
					</view>
				</view>
				<view class="guarn-box " style="margin-top: 10px;">
					<view class="header-name">
						<text style="color: red;">*</text>
						家人身份证
					</view>
					<view style="display: flex;">
						<view>
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="addHouseholdCdo.id_card_just">
								<view class="guarn-box2-img">
									<image :src="addHouseholdCdo.id_card_just" mode="aspectFill"
										style="border-radius: 20rpx;"></image>
									<u-icon @click="colseImg(addHouseholdCdo.id_card_just)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!addHouseholdCdo.id_card_just">
								<view @click="uoloadHouse" class="guarn-box-img">
									<image class="u-m-t-72 "
										style="width: 100%;  height: 103%;     margin-top: -1px !important;  margin-right: 2px;"
										src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zhengSf.png" mode=""></image>
									<view><span style="color: #999999FF;">身份证正面</span></view>
								</view>
							</view>
						</view>
						<view>
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="addHouseholdCdo.id_card_back">
								<view class="guarn-box2-img">
									<image :src="addHouseholdCdo.id_card_back" mode="aspectFill"
										style="border-radius: 20rpx;"></image>
									<u-icon @click="colseImg2(addHouseholdCdo.id_card_back)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!addHouseholdCdo.id_card_back">
								<view @click="uoloadHouse2" class="guarn-box-img">
									<image class="u-m-t-72 "
										style="width: 100%;  height: 103%;     margin-top: -1px !important;  margin-right: 2px;"
										src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/fanSf.png" mode=""></image>
									<view><span style="color: #999999FF;">身份证反面</span></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 30px;padding-bottom: 20px;">
			<button class="yilingqu" @click="addhouseholdInformation()">确认提交</button>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {

				type: 1,
				index: 0,
				array: ['分类', '分类二'],
				inday: 0,
				ruleForm: {
					renType: null,
				},
				indexList: true,
				addHouseholdCdo: {
					// org_id: JSON.parse(getCookie('userdata')).orgId, //公司）
					pro_id: null, //项目
					user_id: uni.getStorageSync('rawData').userId, //当前创建人
					hous_user_id: null, //住户user_id 后端查
					room_id: null, //（项目id、必传）
					hous_user_name: null, //住户名称
					family_type: null, //人员家庭
					personnel_type: null, //（项目id、必传）
					hous_phone: null, //住户电话
					id_card: null, //身份证号
					id_card_just: null, //身份证正面
					id_card_back: null, //身份证反面
					hous_nation: null, //民族
					hous_sex: null, //性别
					born_date: null, //出生日期
					career: null, //职业

				},
				indexe: 0,
				sexList: [{
						id: 0,
						name: '请选择',
					},
					{
						id: 1,
						name: '男',
					},
					{
						id: 2,
						name: '女',
					}
				],
				date: '请选择时间',
			}
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//点击确认提交按钮
			addhouseholdInformation() {
				if (!this.addHouseholdCdo.family_type) {
					return uni.showToast({
						title: '请输入与户主关系',
						icon: 'none'
					})
				}
				if (!this.addHouseholdCdo.hous_user_name) {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				if (!this.addHouseholdCdo.hous_phone) {
					return uni.showToast({
						title: '请输入电话',
						icon: 'none'
					})
				}
				let res = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
				if (!this.addHouseholdCdo.id_card) {
					return uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
				} else if (!res.test(this.addHouseholdCdo.id_card)) {
					return uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
				}
				if (!this.addHouseholdCdo.hous_sex) {
					return uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
				}

				if (!this.addHouseholdCdo.born_date) {
					return uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					})
				}

				if (!this.addHouseholdCdo.hous_nation) {
					return uni.showToast({
						title: '请输入民族',
						icon: 'none'
					})
				}
				if (!this.addHouseholdCdo.id_card_just || !this.addHouseholdCdo.id_card_back) {
					return uni.showToast({
						title: '请上传身份证正反面照片',
						icon: 'none'
					})
				}
				this.$request.api.getaddtypeList({
					user_id: this.homelist.ownerUserId,
					family_type: this.addHouseholdCdo.family_type,
					hous_user_name: this.addHouseholdCdo.hous_user_name,
					hous_phone: this.addHouseholdCdo.hous_phone,
					id_card: this.addHouseholdCdo.id_card,
					id_card_just: this.addHouseholdCdo.id_card_just,
					id_card_back: this.addHouseholdCdo.id_card_back,
					hous_sex: this.addHouseholdCdo.hous_sex,
					born_date: this.addHouseholdCdo.born_date,
					hous_nation: this.addHouseholdCdo.hous_nation,
					career: this.addHouseholdCdo.career,
					room_id: this.homelist.roomId, //点击roomID
					pro_id: this.homelist.proId, //项目
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '新增家人信息成功！',
							icon: 'one'
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '/my/information/familyList'
							})
						}, 200)
						this.addHouseholdCdo.family_type = null;
						this.addHouseholdCdo.hous_user_name = null;
						this.addHouseholdCdo.hous_phone = null;
						this.addHouseholdCdo.id_card = null;
						this.addHouseholdCdo.id_card_just = null;
						this.addHouseholdCdo.id_card_back = null;
						this.addHouseholdCdo.hous_sex = null;
						this.addHouseholdCdo.born_date = null;
						this.addHouseholdCdo.hous_nation = null;
						this.addHouseholdCdo.career = null;
					}
				})

			},
			//选择男女
			typeBtn: function(e) {
				this.indexe = e.target.value
				this.addHouseholdCdo.hous_sex = this.sexList[this.indexe].id
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//选择时间
			bindDateChange: function(e) {
				this.date = e.target.value
				this.addHouseholdCdo.born_date = this.date
			},
			checked(index) {
				this.isActive = index
			},
			newly() {
				uni.navigateTo({
					url: '/privateMsg/clap/homepageClap'
				})
			},
			shouList() {
				this.indexList = !this.indexList
			},
			//上传身份证正面
			colseImg(val) {
				this.addHouseholdCdo.id_card_just = null;
				if (!this.addHouseholdCdo.id_card_just) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						uni.chooseMedia({
							count: 9,
							mediaType: ['image','video'],
							sourceType: ['album', 'camera'],
							maxDuration: 30,
							camera: 'back',
							success(res) {
								for (let i = 0; i < res.tempFiles.length; i++) {
									pathToBase64(res.tempFiles[i].tempFilePath).then(res1 => {
										_this.$request.api.image({
											imageBase64: res1
										}).then(res => {
											_this.addHouseholdCdo.id_card_just = res.data.data
											_this.imgFlag = false;
										})
									})
								}
							}
						})
					},
					fail: function(res) {
						console.log(res,'-------图谱上传')
					}
				});
				return;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.addHouseholdCdo.id_card_just =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.addHouseholdCdo.id_card_just =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//上传身份证反面
			colseImg2(val) {
				this.addHouseholdCdo.id_card_back = null;
				if (!this.addHouseholdCdo.id_card_back) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse2() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.addHouseholdCdo.id_card_back =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.addHouseholdCdo.id_card_back =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 149px;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 149px;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 149px;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}



	/deep/.u-input__input {
		line-height: 54px;
		height: 54px;
		// background-color: #76D904;
	}
</style>